<template>
<div class="games row visible-on">
  <div class="gamsg">
    <group title="" position="bottom">
      <span style="float:left">拉开Tap墙</span>
      <x-switch  title="" v-model="show8">
      </x-switch>
    </group>
    <div>
      <popup v-model="show8" position="left" width="80%">
        <div class="position-horizontal-demo" style="background: #b4ebfa">
          <span class="vux-close" @click="show8 = false">
          </span>
          <br>
          <div class="daohang">
            <div>
              <img width="30%" src="/static/logo.png" alt="">
              <div>
                <p><a href="#/">首页</a></p>
                <p><a href="">排行</a></p>
                <p><a href="">安利墙</a></p>
                <p><a href="">发现</a></p>
              </div>
              <section>
                <p>未开发的地方</p>
                <p><a href="#/zhuce">登录</a></p>
              </section>
            </div>
          </div>
        </div>
      </popup>
    </div>
  </div>
  <div class="Gamers">
    <div class="product">
      <!-- ==1== -->
      <div class="pptop visible-xs  visible-sm ">
        <div class="pptop-left">
          <img :src="'http://192.168.13.196:2200/images/'+games.gameer_bimg[1]" alt="">
          <p><a href="">{{games.gamename}}</a></p>
        </div>
        <div  class="pptop-right">
          <h4 style="margin-left:35%">{{games.gameer}}</h4>
          <p><a href="">发行商：{{games.gameer_poeple}}</a></p>
          <p><a href="">开发商：{{games.gameer_poeple}}</a></p>
          <p>{{games.buy_count}}人购买 | {{games.click_count}}人安装</p>
          <form action="">
            <button @click="user" type="submit">购买</button>
            <button type="submit">试玩</button>
          </form>
        </div>
        <!-- .................... -->
        <div class="xxk">
          <ul>
            <li>
              <a @click="evs" href="">详情</a>
            </li>
            <li>
              <a @click="evss" href="">评价</a>
            </li>
            <li>
              <a @click="evsss" href="">论坛</a>
            </li>
          </ul>
        </div>
      </div>
      <!-- ========中============ -->
      <div class="pptopm visible-md">
        <div class="pptopm-left">
          <img :src="'http://localhost:2200/images/'+games.gameer_bimg[1]" alt="">
          <p><a href="">{{games.gameer}}</a></p>
        </div>
        <div  class="pptopm-right">
          <h1>{{games.gamename}}</h1>
          <p><a href="">发行商：{{games.gameer_poeple}}</a></p>
          <p><a href="">开发商：{{games.gameer_poeple}}</a></p>
          <p>{{games.buy_count}}人购买 | {{games.click_count}}人安装</p>
          <form action="">
            <button @click="user" type="submit">购买</button>
            <button @click="shiwan">试玩</button>
          </form>
        </div>
      </div>
      <div class="pptops visible-lg col-xs-6 col-sm-3">
        <img src="/static/3.png" alt="">
      </div>
      <div class="pptright  visible-md  visible-lg ">
        <div class="ids  visible-lg col-lg-12 col-md-10">
          <img style="width:40%;padding:15px 5px;float:left" src="/static/3.png" alt="">
          <div class="top-tops" style="width:60%;float:left;padding:15px 0">
             <img style="width:35%;background:#12a7b4;padding:2px 0;" src="/static/logo.png" alt="">
             <span style="color:#12a7b4;font-size:20px;font-weight:900;line-height:30px">发 现 好 游 戏</span>
             <p style="font-size:16px;color:#bebebe;padding:5px 0">欢迎关注我</p>
             <p class="iss">
               <i title="微信" class="fa fa-meetup"></i>
               <i title="运动" class="fa fa-grav"></i>
               <i title="好友" class="fa fa-drivers-license"></i>
               <i title="同住地球村" class="fa fa-ravelry"></i>
               <i title="火，火，火" class="fa fa-free-code-camp"></i>
             </p>
          </div>
        </div>
        <div class="ids  visible-md col-lg-12 col-md-10">
          <img style="width:40%;padding:15px 5px;float:left" src="/static/3.png" alt="">
          <div class="top-tops" style="width:60%;float:left;padding:15px 0">
             <img style="width:35%;background:#12a7b4;padding:2px 0;" src="/static/logo.png" alt="">
             <span style="color:#12a7b4;font-size:18px;font-weight:500;line-height:30px">好游戏</span>
             <p style="font-size:16px;color:#bebebe;padding:5px 0">欢迎关注我</p>
             <p class="iss">
               <i title="微信" class="fa fa-meetup"></i>
               <i title="运动" class="fa fa-grav"></i>
               <i title="好友" class="fa fa-drivers-license"></i>
               <i title="同住地球村" class="fa fa-ravelry"></i>
               <i title="火，火，火" class="fa fa-free-code-camp"></i>
             </p>
          </div>
          
        </div>
      </div>
      <!-- ===2=== -->
    </div>
  </div>
<!-- ======================= -->
  <div v-if="xuan3">
    <div class="luntans visible-xs">
      <div class="ltantop">
         <p style="padding-top:2px;">
          版主：
          <img style="width:10%;border-radius: 50%" src="/static/3.png" alt="">
          <img style="width:10%;border-radius: 50%" src="/static/3.png" alt="">
          <span style="margin-left: 28%">
          <a :href="'#/luntan/'+games.gameid"  :name="games.gameid">/发表新主题</a>
          </span>
         </p>
        <p><a href="">关注</a></p>
       </div>
       <div  class="ltanmain">
       <ul style="padding:0 0" v-for="(item ,index) in gwenzhang">
         <li style="width:100%;list-style:none;margin-top:10px;">
           <p>
             <divider>
               <span style="margin-left:-15px">大佬</span>
               <img style="width:43%;" src="/static/3.png" alt="">
              <a :href="'#/paihang'+item._id"> {{item.author.username.substring(0,4)}}</a>
            </divider>
           </p>
            <a :href="'#/reply/' + item._id" :name="item._id" style="text-align: left;"> <h4 style="margin-left:5px;margin:5px 10px;">{{item.title}}</h4></a>
           <p style="color:#aaa;margin:0 12px;">
            {{item.content}}
           </p>
           <p style="margin-top:2%">
             <span style="margin:0 10px;">{{item.create_time}}</span>
             <span style="margin-left:33%;">{{item.click_num}}点赞</span>
              <a href=""><span>{{item.comment_num}}回复</span></a>
           </p>
        </li>
       </ul>
    </div>
    <!-- <p>{{gwenzhang}}</p> -->
   </div>
  </div>
<!-- =================== -->
  <div v-if="xuan2">
    <div class="gamespl">
      <div class="plneir">
        <p style="padding-top:5px;">
          用户：
          <img style="width:10%;border-radius: 50%" src="/static/3.png" alt="">
          <span style="margin-left: 41%">
           <a @click="liuyan"  style="padding:15px 0">发表新评论</a>
          </span>
        </p>
        <group v-if="show3">
          <x-textarea v-model="liuyans" :max="50"  @on-focus="onEvent('focus')" @on-blur="onEvent('blur')"></x-textarea>
          <input type="file" style="width:100%;border:none;" @change="sctp($event)">
          <button @click="plfabiao" style="margin:5px 0;float:right;background:wheat;border:none" type="submit">确认</button>
          <button @click="quxiaos" style="margin:5px 0;;float:left;background:wheat;border:none" type="submit">取消</button>
        </group>
        <ul class="list" style="padding:12px 5px;" v-for="(item,index) in replys">
          <li style="padding:5px 5px;list-style:none;border-top: solid 1px #aaa">
            <a href="">
              <img style="width:10%;border-radius: 50%" :src="'/static/' + item.content_img" alt="">
              <span>{{item.author.username.substring(0,4)}}</span>
            </a>
            <span style="margin-left: 50%">
              <button @click="dely" :name="item._id" style="border:none;background:#b4ebfa;">
                <i class="fa fa-dot-circle-o"></i>
              </button>
            <span style="padding:10px 0">{{item.create_time}}</span>
            </span>
            <p style="margin-top:5px;">
              {{item.content}}
            </p>
            <!-- ================ -->
            <p style="margin-top:12px;">
              <a class="likes" @click="mylike" :value="index" :name="item._id" style="display: inline-block;width:25%;background:#b4ebfa;margin-top:3px;">
                <i class="fa fa-heart-o">
                  {{item.likes}}
                </i>
              </a>
              <a style="display: inline-block;width:22%;background:#b4ebfa;margin-top:3px">
                <i class="fa fa-thumbs-up">
                  {{item.up}}重
                </i>
              </a>
              <a style="display: inline-block;width:23%;background:#b4ebfa;margin-top:3px">
                <i class="fa fa-thumbs-down">
                  {{item.dowm}}复
                </i>
              </a>

              <a v-if="show7" @click="twore"  :name="item._id" style="display: inline-block;width:25%;background:#b4ebfa;margin-top:3px">
                <i class="fa fa-file">
                  喷此人
                </i>
              </a>

              <a v-else @click="getretwos" :name="item._id" style="display: inline-block;width:25%;background:yellow;margin-top:3px">
                <i class="fa fa-file">
                  {{item.comment_num}}
                </i>
              </a>
              
            </p>
          </li>
        </ul>
        <ul v-if="show6">
          <li style="list-style:none;">
            二级回复
             <button @click="quxiaos" style="margin:5px 0;background:wheat;border:none" type="submit">取消</button>
            </li>
          <divider> {{ $t('精简版回复')}}</divider>
         <marquee>
          <marquee-item v-for="( i,index) in erjihuofu" :key="index" @click.native="onClick(i)" class="align-middle">
            <ul style="padding:0 0 ;">
              <li style="list-style:none;text-align: center;">{{i}}</li>
            </ul>
          </marquee-item>
         </marquee>
        </ul>
      </div>
    </div>
  </div>
  <!-- ================= -->
  <div v-if="xuan1">
    <div class="gamespl">
      <div class="plner" style="text-align: center;">
       游戏详情暂时保密
       <divider>{{ $t('慢慢看喽')}}</divider>
         <marquee>
          <marquee-item v-for="( i,index) in games" :key="index" @click.native="onClick(i)" class="align-middle">
            <ul style="padding:0 0 ;">
              <li style="list-style:none;text-align: center;">{{i}}</li>
            </ul>
          </marquee-item>
         </marquee>
      </div>
    </div>
  </div>
  
</div>

</template>

<script>
import {
  TransferDom,
  Popup,
  Group,
  Cell,
  XButton,
  XSwitch,
  Toast,
  XAddress,
  ChinaAddressData,
  XTextarea,
  XInput,
  Marquee,
  MarqueeItem,
  Divider
} from "vux";
import moment from "moment";
export default {
  data() {
    return {
      asyncCount: 0,
      showContent004: false,
      show8: false,
      show1: false,
      games: {
        gameer_bimg: []
      },
      tupian: [],
      jianjie: [],
      show2: false,
      xuan1: false,
      xuan2: false,
      xuan3: true,
      show3: false,
      liuyans: "",
      userid: "",
      touxiang: "",
      replys: [],
      rephoto: [],
      likes: "",
      back: true,
      show6: false,
      show7: false,
      erjihuofu: [],
      erlength: 0,
      gwenzhang: []
    };
  },
  components: {
    Popup,
    Group,
    Cell,
    XSwitch,
    Toast,
    XAddress,
    XButton,
    XTextarea,
    XInput,
    Marquee,
    MarqueeItem,
    Divider
  },
  methods: {
    onClick(i) {
      console.log(i);
    },
    quxiaos: function(ev) {
      ev.preventDefault();
      this.show3 = false;
      this.show6 = false;
      this.show7 = false;
    },
    liuyan: function(ev) {
      ev.preventDefault();
      this.show3 = true;
    },
    evs: function(ev) {
      ev.preventDefault();
      this.xuan1 = true;
      this.xuan2 = false;
      this.xuan3 = false;
    },
    evss: function(ev) {
      ev.preventDefault();
      this.xuan1 = false;
      this.xuan2 = true;
      this.xuan3 = false;
    },
    evsss: function(ev) {
      ev.preventDefault();
      this.xuan1 = false;
      this.xuan2 = false;
      this.xuan3 = true;
    },
    // ===========管理员功能删除评论=============
    dely: function(ev) {
      ev.preventDefault();
      var value = ev.currentTarget.name;
      console.log(value);
      this.$axios
        .post("/top/dell", {
          id: value
        })
        .then(data => {
          if (data.data.error == 1) {
            alert(data.data.message);
          } else {
            alert(data.data.message);
          }
          console.log(data.data);
        })
        .catch(err => {
          console.log(err);
        });
    },
    mylike: function(ev) {
      var value = ev.currentTarget;
      var index = value.attributes["value"].value;
      var that = this;
      this.back = false;
      ev.preventDefault();

      // console.log(index);
      this.$axios
        .get("/top/mylike", {
          params: {
            lk: value.name
          }
        })
        .then(data => {
          // console.log(data.data.likes);
          for (var i = 0; i < this.replys.length; i++) {
            // console.log(this.replys[index].likes)
            this.replys[index].likes = data.data.likes;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getretwos: function(ev) {
      this.show6 = true;
      this.show7 = true;
      var that = this;
      ev.preventDefault();
      var value = ev.currentTarget;
      console.log(value.name + "456456456");
      this.$axios
        .post("/top/allteore", {
          oneid: value.name
        })
        .then(data => {
          // console.log(data.data.data);
          var arr = data.data.data;
          arr.forEach(function(data) {
            // console.log(data)
            that.erjihuofu.push(
              "用户" + data.author.username + "gei" + data.games_id + "回复了"
            );
          });
        })
        .catch(err => {
          console.log(err);
        });
    },

    twore: function(ev) {
      ev.preventDefault();
      var that = this;
      var ids = this.$route.params;
      //用户登录--留言存在--gameid--点击的id--
      var value = ev.currentTarget;
      // console.log(value.name + '456456456')
      this.$axios
        .get("/top/gameing")
        .then(data => {
          if (data.data.error == 1) {
            alert(data.data.message);
          } else {
            var that = this;
            var userisd = data.data.message._id;
            this.$axios
              .post("/top/twore", {
                gid: ids,
                oneid: value.name,
                uid: userisd
              })
              .then(data => {
                if (data.data.error == 0) {
                  alert(data.data.message);
                }
              })
              .catch(err => {
                console.log(err);
              });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    twores: function(ev) {},
    onEvent(event) {
      // console.log("on", event);
      // console.log(event);
    },
    user: function(ev) {
      var that = this;
      this.$axios
        .get("/top/gameing")
        .then(data => {
          // console.log(data.data.message);
          that.userid = data.data.message._id;
          if (data.data.error == 1) {
            alert(data.data.message);
            location.href = "#/denglu";
          } else {
            // confirm(this.games.gameprize);
            var x;
            var r = confirm(this.games.gameprize);
            if (r == true) {
              x = this.games.gameid;
              this.$axios
                .post("/top/buys", {
                  gid: x
                })
                .then(data => {
                  if (data.data.error == 0) {
                    alert(data.data.message);
                  } else {
                    alert(data.data.message);
                  }
                })
                .catch(err => {
                  console.log(err);
                });
            } else {
              x = '你按下了"取消"按钮!';
            }
            console.log(x);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    sctp: function(event) {
      // console.log(event.target.files[0].name)
      this.touxiang = event.target.files[0].name;
    },
    plfabiao: function(ev) {
      var that = this;
      const moment = require("moment");
      moment.locale("zh-cn");
      ev.preventDefault();
      var ids = this.$route.params;
      this.$axios
        .get("/top/gameing")
        .then(data => {
          // console.log(data.data.message);
          if (data.data.error == 1) {
            alert(data.data.message);
          } else {
            // console.log(this.touxiang)
            var that = this;
            var userisd = data.data.message._id;
            this.$axios
              .post("/top/reply", {
                gid: ids,
                uid: userisd,
                content: this.liuyans,
                toux: this.touxiang
              })
              .then(data => {
                console.log(data.data.message);
                if (data.data.error == 0) {
                  this.show3 = false;
                  alert(data.data.message);
                } else {
                  alert(data.data.message);
                }
              })
              .catch(err => {
                // console.log(err);
              });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    shiwan:function(){

    }
  },
  mounted: function() {
    var that = this;
    const moment = require("moment");
    moment.locale("zh-cn");
    var ids = this.$route.params;
    this.$axios
      .post("/top/sones", { ids: ids })
      .then(data => {
        var games = data.data.data;
        that.games = games;
        // var num = that.games.gameer_img.substring(0, 1);
        // console.log(num);
        // that.tupian.push("/static/" + num + ".png");
        // console.log(that.games);
      })
      .catch(err => {
        console.log(err);
      });
    this.$axios
      .post("/top/getreply", {
        idd: ids
      })
      .then(data => {
        // console.log(data.data.redata);
        var replys = data.data.redata;
        replys.forEach(function(data) {
          // console.log(data)
          data.create_time = moment(data.create_time).fromNow();
          // -------------------保留修改---------------------
          // if (data.create_time.substring(2, 7) == "hours") {
          //   data.create_time = data.create_time.substring(0, 2) + "小时以前";
          // } else {
          //   data.create_time = data.create_time.substring(0, 2)+ "小时以前";
          // }
          that.replys.push(data);
        });
        // console.log(that.replys);
      })
      .catch(err => {
        console.log(err);
      });
    setTimeout(() => {
      this.asyncCount = 5;
    }, 1000);
    this.$axios
      .post("/top/focetext", {
        gid: ids
      })
      .then(data => {
        if (data.data.error == 1) {
          alert(data.data.message);
        } else {
          // console.log(data.data.data);
          data.data.data.forEach(function(datas) {
            // console.log(datas);
            datas.create_time = moment(datas.create_time).fromNow();
            that.gwenzhang.push(datas);
          });
        }
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>
<style lang = "less" scoped>
.align-middle {
  text-align: center;
  transition: all 0.5s;
}
@import "~vux/src/styles/close.less";
a {
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
a:hover {
  color: red;
}
.plneir {
  width: 95%;
  margin: 1% 2.5%;
}
.gamespl {
  box-shadow: -1px -1px 5px #aaa;
  width: 80%;
  margin: 2% auto;
}
.ltanmain ul li {
  padding: 2px;
  box-shadow: -1px -1px 5px #b4ebfa;
}
.ltanmain {
  width: 95%;
  margin: 1% 2.5%;
}
.ltantop {
  width: 95%;
  margin: 1% 2.5%;
  /* border: solid 1px #b4ebfa; */
}
.luntans {
  box-shadow: -1px -1px 5px #aaa;
  width: 75%;
  margin: 2% 12.5%;
}
/* ----------以上论坛------------- */
.xxk ul li a {
  text-decoration: none;
  padding: 10% 15%;
  color: #12a7b4;
}
.xxk ul li {
  list-style: none;
  width: 33.3%;
  float: left;
  box-shadow: -1px -1px 5px #aaa;
  text-align: center;
  padding: 3% 0;
}
.xxk ul li:hover a {
  color: white;
}
.xxk ul li:hover {
  background: #12a7b4;
}

.xxk ul {
  width: 100%;
  padding: 1% 0;
  margin-bottom: 15%;
}
.xxk {
  /* box-shadow: -1px -1px 5px #aaa; */
  margin-top: 8%;
  padding: 2% 0;
}
/* ............... */
.pptop-right button {
  width: 40%;
  border: none;
  margin-top: 2%;
  background: #12a7b4;
  color: white;
  margin-left: 30%;
  padding:5px 0;
}
.pptop-right button:hover {
  background: #b4ebfa;
  color: black;
}
.pptop-right p {
  margin-top: 0;
  text-align: center;
  border: solid 1px #12a7b4;
  margin-top: 1%;
  padding: 1%;
  border-radius: 5px;
  transition: all 0.5s;
}
.pptop-right p:hover {
  transform: translate(5px);
}
.pptop-right h4 {
  margin: 0 15%;
  /* padding: 0 15%; */
}
.pptop-right {
  width: 80%;
  margin-left: 10%;
}
.pptop-left {
  width: 30%;
}
.pptop .pptop-left p {
  width: 80%;
  background: #12a7b4;
  margin-top: 13%;
  margin-left: 125%;
  text-align: center;
}
.pptop div p a {
  color: black;
}
/* 2222222222222222 */
.pptopm-right button {
  margin-right: 5%;
  width: 30%;
  border: none;
  margin-top: 1%;
  background: #12a7b4;
  color: white;
}
.pptopm-right button:hover {
  background: #b4ebfa;
  color: black;
}
.pptopm-right p {
  margin-top: 0;
  text-align: left;
  background: #12a7b4;
  margin-top: 1%;
  padding: 1%;
  border-radius: 5px;
  transition: all 0.5s;
}
.pptopm-right p:hover {
  transform: translate(5px);
  background: #b4ebfa;
}
.pptopm-right h1 {
  margin: 0 0;
}
.pptopm-right {
  width: 70%;
  float: left;
}
.pptopm-left {
  width: 30%;
  float: left;
}
.pptopm .pptopm-left p {
  width: 80%;
  text-align: center;
  background: #12a7b4;
  margin-top: 3%;
}
.pptopm div p a {
  color: black;
}
/* ------------------------ */
.pptop img {
  width: 130%;
  margin-bottom: 2%;
  margin-top: 10%;
  margin-left: 100%;
}
.pptopm img {
  width: 80%;
  margin-bottom: 2%;
}

.pptops img {
  float: left;
  width: 15%;
}
.pptright {
  float: left;
  width: 30%;
  padding: 2%;
  box-shadow: -1px -1px 5px #aaa;
  margin-left: 1%;
}
.pptopm {
  float: left;
  overflow: hidden;
  width: 69%;
  padding: 2%;
  box-shadow: -1px -1px 5px #aaa;
}
.pptop {
  float: left;
  overflow: hidden;
  width: 100%;
  padding: 2%;
  /* border: solid 1px black; */
  box-shadow: -1px -1px 5px #aaa;
}
.pptops {
  float: left;
  overflow: hidden;
  width: 69%;
  padding: 2%;
  /* border: solid 1px black; */
  box-shadow: -1px -1px 5px #aaa;
}
.Gamers .product {
  width: 100%;
  background: white;
  overflow: hidden;
}
.Gamers {
  box-shadow: -1px -1px 5px #aaa;
  width: 70%;
  margin: 2% 15%;
}
.daohang div section p {
  text-align: center;
  padding: 3%;
}
.daohang div section {
  margin-top: 3%;
  box-shadow: -1px -1px 5px #aaa;
}
.daohang div div p {
  text-align: center;
  font-size: 18px;
  padding: 10%;
  transition: all 0.5s;
}
.daohang div div p a {
  color: black;
  text-decoration: none;
  padding: 5% 23%;
}
.daohang div div p:hover {
  background: #12a7b4;
  transform: translate(10px);
  box-shadow: -1px -1px 5px black;
}
.daohang div div {
  box-shadow: -1px -1px 5px #aaa;
}

.daohang div img {
  margin-left: 35%;
}
.daohang div {
  width: 80%;
  margin: 5px auto;
  height: 80%;
}
.daohang {
  box-shadow: -1px -1px 5px #aaa;
  margin: 40px auto;
  width: 100%;
  background: wheat;
  padding: 10%;
  padding-bottom: 130px;
}
.position-horizontal-demo {
  position: relative;
  /* height: 100%; */
}
.gamsg span {
  margin-left: 15%;
  padding-top: 11px;
  color: #12a7b4;
}
.gamsg {
  position: fixed;
  bottom: 0;
  width: 105%;
  z-index: 900;
  margin: 0 auto;
}
.games {
  margin-bottom: 40px;
  margin-top: 83px;
}
.vux-close {
  position: absolute;
  color: #000;
  right: 5px;
  top: 5px;
  z-index: 10;
}
p {
  margin: 0 0;
}
</style>
